<template>
  <div class="paperGroup" v-if="paper">
    <!-- 标题 -->
    <div class="paperGroup-titleview">
      <div class="paperGroup-titleview-title">
        {{ props.title }}
      </div>
    </div>
    <!-- 内容 -->
    <slot></slot>
  </div>
</template>
<script setup name="paperGroup" lang="ts">
import { getOssFileUrl } from "@/utils";

// 属性
const props = withDefaults(
  defineProps<{
    title: string;
  }>(),
  {
    title: "",
  }
);
let paper = ref("");
onMounted(() => {
  paper.value = `url(${
    getOssFileUrl({
      paper: "/image/mvp/paper-group-title.png",
    }).paper
  })`;
});
</script>
<style lang="scss" scoped>
.paperGroup {
  background-color: #fff;
  border-radius: 12 * 2px;

  &-titleview {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10 * 2px;
    &-title {
      min-width: 120 * 2px;
      height: 32 * 2px;
      background-image: v-bind("paper");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: 100% 32 * 2px;
      display: inline-block;
      line-height: 32 * 2px;
      padding: 0 32 * 2px;
      font-size: 17 * 2px;
      color: #fff;
      font-weight: 590;
      z-index: 99;
      text-align: center;
    }
  }
}
</style>
